let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')

console.log(__dirname);
console.log(path.resolve(__dirname, 'dist'));
module.exports = {
    // 入口文件
    entry: { 
        "index":"./src/index.js",
        "index2":"./src/index2.js"
        },

    // 输出文件
    output: {
        filename: "[name].bundle.js", // [name] 为入口文件中的名字
        path: path.resolve(__dirname, 'dist')
    } ,
    
    // 模式
    mode: 'development' ,

    // loader
    module:{
         rules:[
             {
                 test: /\.css$/,
                 //转换CSS样式， 从下到上（从右到左）的顺序执行。
                 use:[
                     "style-loader",
                     "css-loader"
                 ]
             },
             {
                 test: /\.(jpg|png|gif)$/,
                 //转换图片
                 loader: 'url-loader',
                 options:{
                     // 图片大小 8kb，大于这个大小才会到处图片，否则直接用base64编码 
                     limit: 8*1024,
                     esModule: false, // 取消es6 语法转换
                     name:'[hash:10].[ext]' // 图片名称
                 }
             },
             {
                 test:/\.html$/, 
                 // 转换html
                 loader: 'html-loader'
             }
         ]
    },

    plugins:[

        // 生成index.html
        new HtmlWebpackPlugin({
            filename: '1.html', // 输出文件名
            template:'./src/index.html', // 模板
            inject: true, // 是否注入 入口生成的 js
            chunks: ['index'] // 与入口对应
        }),
        new HtmlWebpackPlugin({
            filename: '2.html',
            template:'./src/index2.html',
            inject: true,
            chunks: ['index2']
        })
    ],

    // 实时热更新 ，web服务器
    devServer:{
        // 文件位置
        contentBase: path.resolve(__dirname, 'dist'),
        compress: true, //是否压缩文件内容
        port: 3000, //端口号
        open: true //是否自动打开浏览器
    }
}